
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">
    <!--  jsTree -->
    <link href="/static/js/plugins/jsTree/dist/themes/default/style.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal m-t" id="main_form" action="/permission" method="post">
        <#if type == 'edit'>
           <input type="hidden" name="_method" value="put">
           <input type="hidden" id="permissionId" name="permissionId" value="${permission.permissionId}">
        </#if>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 权限名称 </label>
            <div class="col-sm-8">
                <input id="permissionName" name="permissionName" class="form-control" type="text" autocomplete="off" value="${permission.permissionName!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 权限 </label>
            <div class="col-sm-8">
                <input id="permission" name="permission" class="form-control" type="text" autocomplete="off" value="${permission.permission!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> url </label>
            <div class="col-sm-8">
                <input id="url" name="url" class="form-control" type="text" autocomplete="off" value="${permission.url!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 类型 </label>
            <div class="col-sm-8">

                <#if permission.type??>
                <#if permission.type == 1>
                    <label class="radio-inline">
                        <input name="type" type="radio" id="inlineCheckbox1" value="0" >  菜单
                    </label>
                    <label class="radio-inline">
                        <input name="type" type="radio" id="inlineCheckbox2" value="1" checked="checked"> 按钮
                    </label>
                </#if>
                <#else>
                      <label class="radio-inline">
                          <input name="type" type="radio" id="inlineCheckbox1" value="0" checked="checked">  菜单
                      </label>
                    <label class="radio-inline">
                        <input name="type" type="radio" id="inlineCheckbox2" value="1"> 按钮
                    </label>

                </#if>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label"> 父级菜单 </label>
            <div class="col-sm-8">
                <input id="parentId" name="parentId"  class="form-control"  type="hidden" autocomplete="off" onfocus="this.blur()" value="${permission.parentId!}">
                <input id="parentName" name="parentName"  class="form-control" type="text" autocomplete="off" onfocus="this.blur()" value="${parentName!}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label"> 图标 </label>
            <div class="col-sm-8">
                <input id="icon" name="icon" class="form-control" type="text" autocomplete="off" onfocus="this.blur()" value="${permission.icon!}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label"> 排序等级 </label>
            <div class="col-sm-8">

                <input id="sortNum" name="sortNum" class="form-control" type="text" autocomplete="off" value="<#if permission.sortNum??>${permission.sortNum!}</#if>">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label"> 描述 </label>
            <div class="col-sm-8">
                <input id="desc" name="desc" class="form-control" type="text" autocomplete="off" value="${permission.desc!}">
            </div>
        </div>

        <div class="form-group ">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8 control-label">
                <input type="button" id="cancel" class="btn btn-w-m btn-primary" value="取消" />
                <input type="submit" id="confirm" class="btn btn-w-m btn-primary" alt="doAdd" value="确定" />
            </div>
        </div>

    </form>
</div>


<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- jQuery Validation plugin javascript-->
<script src="/static/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/static/js/plugins/validate/messages_zh.min.js"></script>

<!-- layer -->
<script src="/static/js/plugins/layer/layer.min.js"></script>

<!--  jsTree -->
<script src="/static/js/plugins/jsTree/dist/jstree.js"></script>
<!--  表单序列化 -->
<script src="/static/js/plugins/formSerialize/formSerialize.js"></script>
<script >

    //以下为修改jQuery Validation插件兼容Bootstrap的方法，没有直接写在插件中是为了便于插件升级
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            if (element.is(":radio") || element.is(":checkbox")) {
                error.appendTo(element.parent().parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });



    var selectMenuId;
    var parentMenuName;

    var parentIndex;
    $(function(){

        //$("#main_form").validate();

        $("#main_form").validate({
            onsubmit:true,// 是否在提交时验证
            onfocusout:false,// 是否在获取焦点时验证
            onkeyup :false,// 是否在敲击键盘时验证
            rules: {　　　　//规则
                permissionName: {　　//要对应相对应的input中的name属性
                    required: true
                },
                permission: {　　//要对应相对应的input中的name属性
                    required: true
                },
                url: {
                    required: true
                },
                type: {
                    required: true
                },
                icon: {

                },
                sortNum: {
                    required: true,
                    number:true
                },
                parentId: {
                    required: true
                }
            },
            messages:{　　　　//验证错误信息
                permissionName: {　　//要对应相对应的input中的name属性
                    required: "请输入权限名称"
                },
                permission: {　　//要对应相对应的input中的name属性
                    required: "请输入权限"
                },
                url: {
                    required: "请输入url"
                },
                type: {
                    required: "请选择类型"
                },
                icon: {

                },
                sortNum: {
                    required: "排序编号"
                },
                parentId: {
                    required: "请选择父菜单"
                }
            },
            submitHandler: function(form) { //通过之后回调
//进行ajax传值


                if($("#parentId").val() != $("#permissionId").val() ){


                 <#if type == 'add'>
                    doAdd();
                 <#elseif type == 'edit'>
                    doEdit();
                 </#if>
                } else {
                    layer.msg("不能选择自己作为父菜单");
                }

            },
            invalidHandler: function(form, validator) {
                return false;
            }
        });

        $("#cancel").click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

         function doAdd(){
             var obj = $("#main_form").serializeObject();
             obj.sortNum = obj.sortNum.replace(/,/g, "");   //去掉逗号
             $.ajax({
                 url : "/permission",
                 type : "post",
                 dataType : "json",
                 data:obj ,
                 success : function(msg) {
                     //要执行的代码
                     console.log($("#main_form").serializeObject());
                     if(msg.data == true){
                         //调用父页面方法
                         parent.flushTable();
                         parent.layer.close(parent.layer.getFrameIndex(window.name));
                         layer.msg("添加成功");
                     } else {
                         layer.msg("添加失败");
                     }
                 }
             });
         }

         function doEdit(){
             var obj = $("#main_form").serializeObject();
             obj.sortNum = obj.sortNum.replace(/,/g, "");   //去掉逗号
             $.ajax({
                 url : "/permission",
                 type : "post",
                 dataType : "json",
                 data: obj,
                 success : function(msg) {
                     //要执行的代码
                     console.log($("#main_form").serializeObject());
                     if(msg.data == true){
                         //调用父页面方法
                         parent.flushTable();
                         parent.layer.close(parent.layer.getFrameIndex(window.name));
                         layer.msg("修改成功");
                     } else {
                         layer.msg("修改失败");
                     }
                 }
             });
         }

        //选择图标
        $("div.fa-hover a").click(function(){
             //alert($(this).children("i").attr("class"));
             console.log($(this).children("i").attr("class"));
             var iconStr = $(this).children("i").attr("class");
            layer.confirm('是否使用  <i class="'+ iconStr +'"> </i>  图标？', {
                btn: ['确定', '取消']
            }, function(index, layero){
                $("#icon").val(iconStr);
                layer.close(index);
                layer.close(parentIndex);
                //按钮【按钮一】的回调
            }, function(index){
                //按钮【按钮二】的回调
            });
        });

        //显示选择图标弹窗
        $("#icon").click(function(){
            parentIndex = layer.open({
                title:'选择 icon',
                type:1,
                area:['800px','500px'],
                content:$("#iconContent")
            });
        });


        //选择菜单弹窗
        $("#parentName").click(function(){
            layer.open({
                type: 1,
                area:['400px','500px'],
                content: $("#jsTreeContent"),
                btn: ['确定'],
                yes: function(index,layero){
                   //确定按钮的回调
                    if(selectMenuId == null || selectMenuId == ''){
                        layer.msg("请选择菜单");
                        return;
                    }
                    $("#parentId").val(selectMenuId);
                    $("#parentName").val(parentMenuName);
                    layer.close(index);
                }
            });
        });

        //渲染树形结构
        $('#jsTree')
                .jstree({
                    "themes": {
                        "stripes": true,
                    },
                    "types": {
                        "default" : {
                            "icon": "/static/img/menu.png"
                        },
                        'nouser': {
                            "icon": '/static/img/menu.png'
                        }
                    },
                    "plugins": ["changed", "types"],
                    'core' : {
                        "data": {
                            "url": '/permission/jsTree',
                            // "type": 'get',
                            "data": function (content) {
                                return content;
                            },
                        }
                    }
                }).on("load_node.jstree",function(e,d){
            // console.log(e)
            // console.log(d)
            var nodes = d.node.children_d;
            for(var i in nodes){
                var node = d.instance.get_node(nodes[i]);
                if( !node.original.haschild ){
                    // d.instance.set_icon(node, 'nouser'); //nouser此处为class
                    d.instance.set_type(node, 'nouser');
                }
            }
        });

        //监听jsTree 节点选中事件
        $('#jsTree').on("changed.jstree", function (e, data) {
           // console.log("The selected nodes are:");
           // console.log(data.selected);
            selectMenuId = data.selected;
            parentMenuName = data.instance.get_node(data.selected).text;
            //console.log(selectMenuId);
        });

    });



</script>


</body>

<div id="jsTreeContent" style="display: none;">
    <div id="jsTree" style="margin-top: 20px;margin-left: 20px;">

    </div>
</div>

<div id="iconContent" style="display: none;">
   <div id="icons" style="margin-left: 20px;margin-right: 20px">
       <section>
           <div class="row fontawesome-icon-list">

               <div class="fa-hover col-md-3 col-sm-4"><a href="#adjust"><i class="fa fa-adjust"></i> adjust</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#anchor"><i class="fa fa-anchor"></i> anchor</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#archive"><i class="fa fa-archive"></i> archive</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#area-chart"><i class="fa fa-area-chart"></i> area-chart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#arrows"><i class="fa fa-arrows"></i> arrows</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#arrows-h"><i class="fa fa-arrows-h"></i> arrows-h</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#arrows-v"><i class="fa fa-arrows-v"></i> arrows-v</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#asterisk"><i class="fa fa-asterisk"></i> asterisk</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#at"><i class="fa fa-at"></i> at</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#car"><i class="fa fa-automobile"></i> automobile <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#balance-scale"><i class="fa fa-balance-scale"></i> balance-scale</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#ban"><i class="fa fa-ban"></i> ban</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#university"><i class="fa fa-bank"></i> bank <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bar-chart"><i class="fa fa-bar-chart"></i> bar-chart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bar-chart"><i class="fa fa-bar-chart-o"></i> bar-chart-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#barcode"><i class="fa fa-barcode"></i> barcode</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bars"><i class="fa fa-bars"></i> bars</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-empty"><i class="fa fa-battery-0"></i> battery-0 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-quarter"><i class="fa fa-battery-1"></i> battery-1 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-half"><i class="fa fa-battery-2"></i> battery-2 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-three-quarters"><i class="fa fa-battery-3"></i> battery-3 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-full"><i class="fa fa-battery-4"></i> battery-4 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-empty"><i class="fa fa-battery-empty"></i> battery-empty</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-full"><i class="fa fa-battery-full"></i> battery-full</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-half"><i class="fa fa-battery-half"></i> battery-half</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-quarter"><i class="fa fa-battery-quarter"></i> battery-quarter</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-three-quarters"><i class="fa fa-battery-three-quarters"></i> battery-three-quarters</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bed"><i class="fa fa-bed"></i> bed</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#beer"><i class="fa fa-beer"></i> beer</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bell"><i class="fa fa-bell"></i> bell</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bell-o"><i class="fa fa-bell-o"></i> bell-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bell-slash"><i class="fa fa-bell-slash"></i> bell-slash</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bell-slash-o"><i class="fa fa-bell-slash-o"></i> bell-slash-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bicycle"><i class="fa fa-bicycle"></i> bicycle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#binoculars"><i class="fa fa-binoculars"></i> binoculars</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#birthday-cake"><i class="fa fa-birthday-cake"></i> birthday-cake</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bolt"><i class="fa fa-bolt"></i> bolt</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bomb"><i class="fa fa-bomb"></i> bomb</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#book"><i class="fa fa-book"></i> book</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bookmark"><i class="fa fa-bookmark"></i> bookmark</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bookmark-o"><i class="fa fa-bookmark-o"></i> bookmark-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#briefcase"><i class="fa fa-briefcase"></i> briefcase</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bug"><i class="fa fa-bug"></i> bug</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#building"><i class="fa fa-building"></i> building</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#building-o"><i class="fa fa-building-o"></i> building-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bullhorn"><i class="fa fa-bullhorn"></i> bullhorn</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bullseye"><i class="fa fa-bullseye"></i> bullseye</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bus"><i class="fa fa-bus"></i> bus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#taxi"><i class="fa fa-cab"></i> cab <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calculator"><i class="fa fa-calculator"></i> calculator</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar"><i class="fa fa-calendar"></i> calendar</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-check-o"><i class="fa fa-calendar-check-o"></i> calendar-check-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-minus-o"><i class="fa fa-calendar-minus-o"></i> calendar-minus-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-o"><i class="fa fa-calendar-o"></i> calendar-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-plus-o"><i class="fa fa-calendar-plus-o"></i> calendar-plus-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-times-o"><i class="fa fa-calendar-times-o"></i> calendar-times-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#camera"><i class="fa fa-camera"></i> camera</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#camera-retro"><i class="fa fa-camera-retro"></i> camera-retro</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#car"><i class="fa fa-car"></i> car</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-down"><i class="fa fa-caret-square-o-down"></i> caret-square-o-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> caret-square-o-left</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-right"><i class="fa fa-caret-square-o-right"></i> caret-square-o-right</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-up"><i class="fa fa-caret-square-o-up"></i> caret-square-o-up</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cart-arrow-down"><i class="fa fa-cart-arrow-down"></i> cart-arrow-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cart-plus"><i class="fa fa-cart-plus"></i> cart-plus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cc"><i class="fa fa-cc"></i> cc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#certificate"><i class="fa fa-certificate"></i> certificate</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#check"><i class="fa fa-check"></i> check</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#check-circle"><i class="fa fa-check-circle"></i> check-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#check-circle-o"><i class="fa fa-check-circle-o"></i> check-circle-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#check-square"><i class="fa fa-check-square"></i> check-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#check-square-o"><i class="fa fa-check-square-o"></i> check-square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#child"><i class="fa fa-child"></i> child</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#circle"><i class="fa fa-circle"></i> circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#circle-o"><i class="fa fa-circle-o"></i> circle-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#circle-o-notch"><i class="fa fa-circle-o-notch"></i> circle-o-notch</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#circle-thin"><i class="fa fa-circle-thin"></i> circle-thin</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#clock-o"><i class="fa fa-clock-o"></i> clock-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#clone"><i class="fa fa-clone"></i> clone</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#times"><i class="fa fa-close"></i> close <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cloud"><i class="fa fa-cloud"></i> cloud</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cloud-download"><i class="fa fa-cloud-download"></i> cloud-download</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cloud-upload"><i class="fa fa-cloud-upload"></i> cloud-upload</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#code"><i class="fa fa-code"></i> code</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#code-fork"><i class="fa fa-code-fork"></i> code-fork</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#coffee"><i class="fa fa-coffee"></i> coffee</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cog"><i class="fa fa-cog"></i> cog</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cogs"><i class="fa fa-cogs"></i> cogs</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#comment"><i class="fa fa-comment"></i> comment</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#comment-o"><i class="fa fa-comment-o"></i> comment-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#commenting"><i class="fa fa-commenting"></i> commenting</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#commenting-o"><i class="fa fa-commenting-o"></i> commenting-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#comments"><i class="fa fa-comments"></i> comments</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#comments-o"><i class="fa fa-comments-o"></i> comments-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#compass"><i class="fa fa-compass"></i> compass</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#copyright"><i class="fa fa-copyright"></i> copyright</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#creative-commons"><i class="fa fa-creative-commons"></i> creative-commons</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#credit-card"><i class="fa fa-credit-card"></i> credit-card</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#crop"><i class="fa fa-crop"></i> crop</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#crosshairs"><i class="fa fa-crosshairs"></i> crosshairs</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cube"><i class="fa fa-cube"></i> cube</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cubes"><i class="fa fa-cubes"></i> cubes</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cutlery"><i class="fa fa-cutlery"></i> cutlery</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tachometer"><i class="fa fa-dashboard"></i> dashboard <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#database"><i class="fa fa-database"></i> database</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#desktop"><i class="fa fa-desktop"></i> desktop</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#diamond"><i class="fa fa-diamond"></i> diamond</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#dot-circle-o"><i class="fa fa-dot-circle-o"></i> dot-circle-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#download"><i class="fa fa-download"></i> download</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#pencil-square-o"><i class="fa fa-edit"></i> edit <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#ellipsis-h"><i class="fa fa-ellipsis-h"></i> ellipsis-h</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#ellipsis-v"><i class="fa fa-ellipsis-v"></i> ellipsis-v</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#envelope"><i class="fa fa-envelope"></i> envelope</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#envelope-o"><i class="fa fa-envelope-o"></i> envelope-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#envelope-square"><i class="fa fa-envelope-square"></i> envelope-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#eraser"><i class="fa fa-eraser"></i> eraser</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#exchange"><i class="fa fa-exchange"></i> exchange</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#exclamation"><i class="fa fa-exclamation"></i> exclamation</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#exclamation-circle"><i class="fa fa-exclamation-circle"></i> exclamation-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#exclamation-triangle"><i class="fa fa-exclamation-triangle"></i> exclamation-triangle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#external-link"><i class="fa fa-external-link"></i> external-link</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#external-link-square"><i class="fa fa-external-link-square"></i> external-link-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#eye"><i class="fa fa-eye"></i> eye</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#eye-slash"><i class="fa fa-eye-slash"></i> eye-slash</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#eyedropper"><i class="fa fa-eyedropper"></i> eyedropper</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#fax"><i class="fa fa-fax"></i> fax</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#rss"><i class="fa fa-feed"></i> feed <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#female"><i class="fa fa-female"></i> female</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#fighter-jet"><i class="fa fa-fighter-jet"></i> fighter-jet</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-archive-o"><i class="fa fa-file-archive-o"></i> file-archive-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-audio-o"><i class="fa fa-file-audio-o"></i> file-audio-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-code-o"><i class="fa fa-file-code-o"></i> file-code-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-excel-o"><i class="fa fa-file-excel-o"></i> file-excel-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-image-o"><i class="fa fa-file-image-o"></i> file-image-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-video-o"><i class="fa fa-file-movie-o"></i> file-movie-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-pdf-o"><i class="fa fa-file-pdf-o"></i> file-pdf-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-image-o"><i class="fa fa-file-photo-o"></i> file-photo-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-image-o"><i class="fa fa-file-picture-o"></i> file-picture-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-powerpoint-o"><i class="fa fa-file-powerpoint-o"></i> file-powerpoint-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-audio-o"><i class="fa fa-file-sound-o"></i> file-sound-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-video-o"><i class="fa fa-file-video-o"></i> file-video-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-word-o"><i class="fa fa-file-word-o"></i> file-word-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#file-archive-o"><i class="fa fa-file-zip-o"></i> file-zip-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#film"><i class="fa fa-film"></i> film</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#filter"><i class="fa fa-filter"></i> filter</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#fire"><i class="fa fa-fire"></i> fire</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#fire-extinguisher"><i class="fa fa-fire-extinguisher"></i> fire-extinguisher</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#flag"><i class="fa fa-flag"></i> flag</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#flag-checkered"><i class="fa fa-flag-checkered"></i> flag-checkered</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#flag-o"><i class="fa fa-flag-o"></i> flag-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bolt"><i class="fa fa-flash"></i> flash <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#flask"><i class="fa fa-flask"></i> flask</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#folder"><i class="fa fa-folder"></i> folder</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#folder-o"><i class="fa fa-folder-o"></i> folder-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#folder-open"><i class="fa fa-folder-open"></i> folder-open</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#folder-open-o"><i class="fa fa-folder-open-o"></i> folder-open-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#frown-o"><i class="fa fa-frown-o"></i> frown-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#futbol-o"><i class="fa fa-futbol-o"></i> futbol-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#gamepad"><i class="fa fa-gamepad"></i> gamepad</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#gavel"><i class="fa fa-gavel"></i> gavel</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cog"><i class="fa fa-gear"></i> gear <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#cogs"><i class="fa fa-gears"></i> gears <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#gift"><i class="fa fa-gift"></i> gift</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#glass"><i class="fa fa-glass"></i> glass</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#globe"><i class="fa fa-globe"></i> globe</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#graduation-cap"><i class="fa fa-graduation-cap"></i> graduation-cap</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#users"><i class="fa fa-group"></i> group <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-rock-o"><i class="fa fa-hand-grab-o"></i> hand-grab-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-lizard-o"><i class="fa fa-hand-lizard-o"></i> hand-lizard-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-paper-o"><i class="fa fa-hand-paper-o"></i> hand-paper-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-peace-o"><i class="fa fa-hand-peace-o"></i> hand-peace-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-pointer-o"><i class="fa fa-hand-pointer-o"></i> hand-pointer-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-rock-o"><i class="fa fa-hand-rock-o"></i> hand-rock-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-scissors-o"><i class="fa fa-hand-scissors-o"></i> hand-scissors-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-spock-o"><i class="fa fa-hand-spock-o"></i> hand-spock-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hand-paper-o"><i class="fa fa-hand-stop-o"></i> hand-stop-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hdd-o"><i class="fa fa-hdd-o"></i> hdd-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#headphones"><i class="fa fa-headphones"></i> headphones</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#heart"><i class="fa fa-heart"></i> heart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#heart-o"><i class="fa fa-heart-o"></i> heart-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#heartbeat"><i class="fa fa-heartbeat"></i> heartbeat</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#history"><i class="fa fa-history"></i> history</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#home"><i class="fa fa-home"></i> home</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bed"><i class="fa fa-hotel"></i> hotel <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass"><i class="fa fa-hourglass"></i> hourglass</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-start"><i class="fa fa-hourglass-1"></i> hourglass-1 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-half"><i class="fa fa-hourglass-2"></i> hourglass-2 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-end"><i class="fa fa-hourglass-3"></i> hourglass-3 <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-end"><i class="fa fa-hourglass-end"></i> hourglass-end</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-half"><i class="fa fa-hourglass-half"></i> hourglass-half</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-o"><i class="fa fa-hourglass-o"></i> hourglass-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#hourglass-start"><i class="fa fa-hourglass-start"></i> hourglass-start</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#i-cursor"><i class="fa fa-i-cursor"></i> i-cursor</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#picture-o"><i class="fa fa-image"></i> image <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#inbox"><i class="fa fa-inbox"></i> inbox</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#industry"><i class="fa fa-industry"></i> industry</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#info"><i class="fa fa-info"></i> info</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#info-circle"><i class="fa fa-info-circle"></i> info-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#university"><i class="fa fa-institution"></i> institution <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#key"><i class="fa fa-key"></i> key</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#keyboard-o"><i class="fa fa-keyboard-o"></i> keyboard-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#language"><i class="fa fa-language"></i> language</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#laptop"><i class="fa fa-laptop"></i> laptop</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#leaf"><i class="fa fa-leaf"></i> leaf</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#gavel"><i class="fa fa-legal"></i> legal <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#lemon-o"><i class="fa fa-lemon-o"></i> lemon-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#level-down"><i class="fa fa-level-down"></i> level-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#level-up"><i class="fa fa-level-up"></i> level-up</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#life-ring"><i class="fa fa-life-bouy"></i> life-bouy <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#life-ring"><i class="fa fa-life-buoy"></i> life-buoy <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#life-ring"><i class="fa fa-life-ring"></i> life-ring</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#life-ring"><i class="fa fa-life-saver"></i> life-saver <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#lightbulb-o"><i class="fa fa-lightbulb-o"></i> lightbulb-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#line-chart"><i class="fa fa-line-chart"></i> line-chart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#location-arrow"><i class="fa fa-location-arrow"></i> location-arrow</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#lock"><i class="fa fa-lock"></i> lock</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#magic"><i class="fa fa-magic"></i> magic</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#magnet"><i class="fa fa-magnet"></i> magnet</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share"><i class="fa fa-mail-forward"></i> mail-forward <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#reply"><i class="fa fa-mail-reply"></i> mail-reply <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#reply-all"><i class="fa fa-mail-reply-all"></i> mail-reply-all <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#male"><i class="fa fa-male"></i> male</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#map"><i class="fa fa-map"></i> map</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#map-marker"><i class="fa fa-map-marker"></i> map-marker</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#map-o"><i class="fa fa-map-o"></i> map-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#map-pin"><i class="fa fa-map-pin"></i> map-pin</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#map-signs"><i class="fa fa-map-signs"></i> map-signs</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#meh-o"><i class="fa fa-meh-o"></i> meh-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#microphone"><i class="fa fa-microphone"></i> microphone</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#microphone-slash"><i class="fa fa-microphone-slash"></i> microphone-slash</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#minus"><i class="fa fa-minus"></i> minus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#minus-circle"><i class="fa fa-minus-circle"></i> minus-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#minus-square"><i class="fa fa-minus-square"></i> minus-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#minus-square-o"><i class="fa fa-minus-square-o"></i> minus-square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#mobile"><i class="fa fa-mobile"></i> mobile</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#mobile"><i class="fa fa-mobile-phone"></i> mobile-phone <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#money"><i class="fa fa-money"></i> money</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#moon-o"><i class="fa fa-moon-o"></i> moon-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#graduation-cap"><i class="fa fa-mortar-board"></i> mortar-board <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#motorcycle"><i class="fa fa-motorcycle"></i> motorcycle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#mouse-pointer"><i class="fa fa-mouse-pointer"></i> mouse-pointer</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#music"><i class="fa fa-music"></i> music</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bars"><i class="fa fa-navicon"></i> navicon <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#newspaper-o"><i class="fa fa-newspaper-o"></i> newspaper-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#object-group"><i class="fa fa-object-group"></i> object-group</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#object-ungroup"><i class="fa fa-object-ungroup"></i> object-ungroup</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paint-brush"><i class="fa fa-paint-brush"></i> paint-brush</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paper-plane"><i class="fa fa-paper-plane"></i> paper-plane</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paper-plane-o"><i class="fa fa-paper-plane-o"></i> paper-plane-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paw"><i class="fa fa-paw"></i> paw</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#pencil"><i class="fa fa-pencil"></i> pencil</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#pencil-square"><i class="fa fa-pencil-square"></i> pencil-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#pencil-square-o"><i class="fa fa-pencil-square-o"></i> pencil-square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#phone"><i class="fa fa-phone"></i> phone</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#phone-square"><i class="fa fa-phone-square"></i> phone-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#picture-o"><i class="fa fa-photo"></i> photo <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#picture-o"><i class="fa fa-picture-o"></i> picture-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#pie-chart"><i class="fa fa-pie-chart"></i> pie-chart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plane"><i class="fa fa-plane"></i> plane</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plug"><i class="fa fa-plug"></i> plug</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plus"><i class="fa fa-plus"></i> plus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plus-circle"><i class="fa fa-plus-circle"></i> plus-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plus-square"><i class="fa fa-plus-square"></i> plus-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#plus-square-o"><i class="fa fa-plus-square-o"></i> plus-square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#power-off"><i class="fa fa-power-off"></i> power-off</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#print"><i class="fa fa-print"></i> print</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#puzzle-piece"><i class="fa fa-puzzle-piece"></i> puzzle-piece</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#qrcode"><i class="fa fa-qrcode"></i> qrcode</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#question"><i class="fa fa-question"></i> question</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#question-circle"><i class="fa fa-question-circle"></i> question-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#quote-left"><i class="fa fa-quote-left"></i> quote-left</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#quote-right"><i class="fa fa-quote-right"></i> quote-right</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#random"><i class="fa fa-random"></i> random</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#recycle"><i class="fa fa-recycle"></i> recycle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#refresh"><i class="fa fa-refresh"></i> refresh</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#registered"><i class="fa fa-registered"></i> registered</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#times"><i class="fa fa-remove"></i> remove <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#bars"><i class="fa fa-reorder"></i> reorder <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#reply"><i class="fa fa-reply"></i> reply</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#reply-all"><i class="fa fa-reply-all"></i> reply-all</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#retweet"><i class="fa fa-retweet"></i> retweet</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#road"><i class="fa fa-road"></i> road</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#rocket"><i class="fa fa-rocket"></i> rocket</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#rss"><i class="fa fa-rss"></i> rss</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#rss-square"><i class="fa fa-rss-square"></i> rss-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#search"><i class="fa fa-search"></i> search</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#search-minus"><i class="fa fa-search-minus"></i> search-minus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#search-plus"><i class="fa fa-search-plus"></i> search-plus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paper-plane"><i class="fa fa-send"></i> send <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#paper-plane-o"><i class="fa fa-send-o"></i> send-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#server"><i class="fa fa-server"></i> server</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share"><i class="fa fa-share"></i> share</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share-alt"><i class="fa fa-share-alt"></i> share-alt</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share-alt-square"><i class="fa fa-share-alt-square"></i> share-alt-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share-square"><i class="fa fa-share-square"></i> share-square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#share-square-o"><i class="fa fa-share-square-o"></i> share-square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#shield"><i class="fa fa-shield"></i> shield</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#ship"><i class="fa fa-ship"></i> ship</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#shopping-cart"><i class="fa fa-shopping-cart"></i> shopping-cart</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sign-in"><i class="fa fa-sign-in"></i> sign-in</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sign-out"><i class="fa fa-sign-out"></i> sign-out</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#signal"><i class="fa fa-signal"></i> signal</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sitemap"><i class="fa fa-sitemap"></i> sitemap</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sliders"><i class="fa fa-sliders"></i> sliders</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#smile-o"><i class="fa fa-smile-o"></i> smile-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#futbol-o"><i class="fa fa-soccer-ball-o"></i> soccer-ball-o <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort"><i class="fa fa-sort"></i> sort</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-alpha-asc"><i class="fa fa-sort-alpha-asc"></i> sort-alpha-asc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-alpha-desc"><i class="fa fa-sort-alpha-desc"></i> sort-alpha-desc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-amount-asc"><i class="fa fa-sort-amount-asc"></i> sort-amount-asc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-amount-desc"><i class="fa fa-sort-amount-desc"></i> sort-amount-desc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-asc"><i class="fa fa-sort-asc"></i> sort-asc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-desc"><i class="fa fa-sort-desc"></i> sort-desc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-desc"><i class="fa fa-sort-down"></i> sort-down <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-numeric-asc"><i class="fa fa-sort-numeric-asc"></i> sort-numeric-asc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-numeric-desc"><i class="fa fa-sort-numeric-desc"></i> sort-numeric-desc</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort-asc"><i class="fa fa-sort-up"></i> sort-up <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#space-shuttle"><i class="fa fa-space-shuttle"></i> space-shuttle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#spinner"><i class="fa fa-spinner"></i> spinner</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#spoon"><i class="fa fa-spoon"></i> spoon</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#square"><i class="fa fa-square"></i> square</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#square-o"><i class="fa fa-square-o"></i> square-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star"><i class="fa fa-star"></i> star</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star-half"><i class="fa fa-star-half"></i> star-half</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star-half-o"><i class="fa fa-star-half-empty"></i> star-half-empty <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star-half-o"><i class="fa fa-star-half-full"></i> star-half-full <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star-half-o"><i class="fa fa-star-half-o"></i> star-half-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#star-o"><i class="fa fa-star-o"></i> star-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sticky-note"><i class="fa fa-sticky-note"></i> sticky-note</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sticky-note-o"><i class="fa fa-sticky-note-o"></i> sticky-note-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#street-view"><i class="fa fa-street-view"></i> street-view</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#suitcase"><i class="fa fa-suitcase"></i> suitcase</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sun-o"><i class="fa fa-sun-o"></i> sun-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#life-ring"><i class="fa fa-support"></i> support <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tablet"><i class="fa fa-tablet"></i> tablet</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tachometer"><i class="fa fa-tachometer"></i> tachometer</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tag"><i class="fa fa-tag"></i> tag</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tags"><i class="fa fa-tags"></i> tags</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tasks"><i class="fa fa-tasks"></i> tasks</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#taxi"><i class="fa fa-taxi"></i> taxi</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#television"><i class="fa fa-television"></i> television</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#terminal"><i class="fa fa-terminal"></i> terminal</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#thumb-tack"><i class="fa fa-thumb-tack"></i> thumb-tack</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#thumbs-down"><i class="fa fa-thumbs-down"></i> thumbs-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#thumbs-o-down"><i class="fa fa-thumbs-o-down"></i> thumbs-o-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#thumbs-o-up"><i class="fa fa-thumbs-o-up"></i> thumbs-o-up</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#thumbs-up"><i class="fa fa-thumbs-up"></i> thumbs-up</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#ticket"><i class="fa fa-ticket"></i> ticket</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#times"><i class="fa fa-times"></i> times</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#times-circle"><i class="fa fa-times-circle"></i> times-circle</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#times-circle-o"><i class="fa fa-times-circle-o"></i> times-circle-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tint"><i class="fa fa-tint"></i> tint</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-down"><i class="fa fa-toggle-down"></i> toggle-down <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-left"><i class="fa fa-toggle-left"></i> toggle-left <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#toggle-off"><i class="fa fa-toggle-off"></i> toggle-off</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#toggle-on"><i class="fa fa-toggle-on"></i> toggle-on</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-right"><i class="fa fa-toggle-right"></i> toggle-right <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#caret-square-o-up"><i class="fa fa-toggle-up"></i> toggle-up <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#trademark"><i class="fa fa-trademark"></i> trademark</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#trash"><i class="fa fa-trash"></i> trash</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#trash-o"><i class="fa fa-trash-o"></i> trash-o</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tree"><i class="fa fa-tree"></i> tree</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#trophy"><i class="fa fa-trophy"></i> trophy</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#truck"><i class="fa fa-truck"></i> truck</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#tty"><i class="fa fa-tty"></i> tty</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#television"><i class="fa fa-tv"></i> tv <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#umbrella"><i class="fa fa-umbrella"></i> umbrella</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#university"><i class="fa fa-university"></i> university</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#unlock"><i class="fa fa-unlock"></i> unlock</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#unlock-alt"><i class="fa fa-unlock-alt"></i> unlock-alt</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#sort"><i class="fa fa-unsorted"></i> unsorted <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#upload"><i class="fa fa-upload"></i> upload</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#user"><i class="fa fa-user"></i> user</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#user-plus"><i class="fa fa-user-plus"></i> user-plus</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#user-secret"><i class="fa fa-user-secret"></i> user-secret</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#user-times"><i class="fa fa-user-times"></i> user-times</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#users"><i class="fa fa-users"></i> users</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#video-camera"><i class="fa fa-video-camera"></i> video-camera</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#volume-down"><i class="fa fa-volume-down"></i> volume-down</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#volume-off"><i class="fa fa-volume-off"></i> volume-off</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#volume-up"><i class="fa fa-volume-up"></i> volume-up</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#exclamation-triangle"><i class="fa fa-warning"></i> warning <span class="text-muted">(alias)</span></a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#wheelchair"><i class="fa fa-wheelchair"></i> wheelchair</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#wifi"><i class="fa fa-wifi"></i> wifi</a></div>

               <div class="fa-hover col-md-3 col-sm-4"><a href="#wrench"><i class="fa fa-wrench"></i> wrench</a></div>

           </div>

       </section>
   </div>
</div>

</html>
